/** */

<template>
  <AButton :type="type" :disabled="disabled" @click="handleClick">
    <template v-if="hasValue">{{ compValue }}</template>
    <slot v-else />
  </AButton>
</template>

<script>
import { AButton } from './util/AComponent'

export default {
  name: 'FCButton',
  components: {
    AButton,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    // feature props
    type: String,

    // value props
    value: [String, Number],

    // view props
    label: [String, Number],

    // event props
    disabled: Boolean,
  },
  data() {
    return {}
  },
  computed: {
    compValue() {
      let compValue = this.value || this.label
      return compValue
    },
    hasValue() {
      return this.compValue !== undefined && this.compValue !== null
    },
  },
  watch: {},
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style></style>
